<template>
    <el-dialog :visible.sync="visible" title="配货详情" :close-on-click-modal="false" :close-on-press-escape="false">
        <el-table ref="Table" v-loading="tableLoading" class="allotDetailsTable" loading='加载中' :data="tableData" border style="width: 100%"
            @selection-change="dataListSelectionChangeHandle">
            <el-table-column prop="spuNo" label="物料编号" header-align="center" align="center"></el-table-column>
            <el-table-column prop="contNo" label="托盘条码" header-align="center" align="center"></el-table-column>
            <el-table-column prop="spuSize" label="尺寸" header-align="center" align="center">     
            </el-table-column>
            <el-table-column prop="spuWeight" label="磅重" header-align="center" align="center">     
            </el-table-column>
            <el-table-column prop="unitCode" label="单位编码" header-align="center" align="center">     
            </el-table-column>
            <el-table-column prop="planQty" label="配货数量" header-align="center" align="center"></el-table-column>
        </el-table>
        <template slot="footer">
            <el-button @click="visible = false">{{ $t('cancel') }}</el-button>
        </template>
    </el-dialog>
</template>
  
<script>
import debounce from 'lodash/debounce'
export default {
    data() {
        return {
            visible: false,
            total: 0,
            tableLoading: false,
            optionsParams: {
                detailId: '',
                taskType: '02',
                page: 1,
                limit: 100
            },
            taskId: '',
            allotQtyList: [],
            submitParams: [],
            tableData: [],
        }
    },
    created() {
        this.queryOptions()
    },
    watch: {
    visible(val) {
      if (val) {
        this.queryOptions()
      }
    }
  },
    methods: {
        allotChange(scope) {
        },
        // 分页, 当前页
        pageCurrentChangeHandle(val) {
            this.optionsParams.page = val
            this.queryOptions()
        },
        pageSizeChangeHandle(val) {
            this.optionsParams.limit = val
            this.queryOptions()
        },
        dataListSelectionChangeHandle(stockList, v) {
            if (stockList.length === 0) {
                this.submitParams = []
                return
            }
            this.submitParams = []
            const sel = stockList.map((item) => item.stockId)
            stockList.forEach((item) => {
                this.submitParams.push({
                    taskId: this.taskId,
                })
            })
        },
        queryOptions() {
            this.tableLoading = true
            this.$http.get('/wms/task/page', { params: this.optionsParams }).then(({ data: res }) => {
                this.tableLoading = false
                if (res.code !== 0) {
                    this.tableData = []
                    this.total = 0
                    return this.$message.error(res.msg)
                }
                this.tableData = res.data.list
            })
        },
        init() {
            this.visible = true
        },
        // 表单提交
        dataFormSubmitHandle: debounce(function () {
            if (this.submitParams.length === 0) {
                this.$message.warning('请选择待取消的配货任务!');
                return
            }
            this.$http.post('/wms/order-detail/refund-allot', this.submitParams).then(({ data: res }) => {
                if (res.code !== 0) {
                    return this.$message.error(res.msg)
                }
                this.$message({
                    message: this.$t('prompt.success'),
                    type: 'success',
                    duration: 1000,
                    onClose: () => {
                        this.visible = false
                        this.$emit('refreshDataList')
                    }
                })
            }).catch(() => { })
        }, 1000, { 'leading': true, 'trailing': false })
    }
}
</script>
<style lang="scss" scoped>
.el-select {
    width: 100%;
}

.distributionTable {
    .el-input-number--mini {
        width: 100px;
    }
}
</style>
  